<template>
    <div class="search-result-container">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <van-cell
                v-for="(item, index) in list"
                :key="index"
                :title="item.title"
                :to="`/article/${item.art_id}`"
            />
        </van-list>
    </div>
</template>

<script>
import * as Api from 'api/common';

export default {
    name: 'search_result',
    components: {
    },
    props: {
        searchText: {
            type: String,
            require: true
        }
    },
    // 定义属性
    data () {
        return {
            list: [],
            loading: false,
            finished: false,
            page: 1,
            perPage: 10
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
        async onLoad() {
            const params = {
                page: this.page,
                per_page: this.perPage,
                q: this.searchText
            };
            const res = await Api.reqDev('/v1_0/search', 'get', {
                params
            });
            // console.log(res);
            if (res.message === 'OK') {
                this.list.push(...res.data.results);
            }
            this.loading = false;
            if (res.data.results.length) {
                this.page++;
            } else this.finished = true;
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
.search-result-container {
    position: fixed;
    top:54px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
}
</style>
